<template>
  <div class="onplay-box">
    <div class="search-nav-box">
      <div class="item-search">
        <span>实名用户</span>
        <el-input
          v-model="company.username"
          placeholder="请输入实名用户"
          clearable
        ></el-input>
      </div>
      <div class="item-search">
        <span>证件号码</span>
        <el-input
          v-model="company.name"
          placeholder="请输入证件号码"
          clearable
        ></el-input>
      </div>
      <div class="item-search">
        <span>手机号码</span>
        <el-input
          v-model="company.telPhone"
          placeholder="请输入手机号码"
          clearable
        ></el-input>
      </div>
      <div
        class="item-botton"
        @click="SearchInfo()"
      >查询</div>
    </div>
    <div class="table-box">
      <el-table
        :data="VipListData"
        stripe
        border
        style="width: 100%"
        class="onplay-table"
        v-loading="loading"
      >
        <el-table-column
          label="会员ID"
          align="center"
          prop='tdaccount'
        >
        </el-table-column>
        <el-table-column
          label="会员名称"
          align="center"
          prop='nickname'
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="实名姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cardnum"
          label="证件号码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="telnum"
          label="手机号码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createtime"
          label="额外奖励发放时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rechargeamount"
          label="奖励金额"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <div
              class="item-number"
              @click="AddMoney(scope.row)"
            >详情</div>
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination @current-change="OnplayCurrentChange" :total="Onplay.total" :current-page="Onplay.pageNum" :page-size="Onplay.pageSize" layout="total, prev, pager, next, jumper" background>
      </el-pagination>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="OnplayCurrentChange"
        :current-page="VipList.pageNum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="VipList.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="VipList.total"
        background
      ></el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      @close="closeWarnDialog"
    >
      <div class="warn-dialog-header">
        <span>额外奖励积分详情</span>
      </div>
      <div class="warn-dialog-body">
        <div style="height:80px;align-items: center;">
          <span style="font-size:16px;margin-left:25px;margin-top:20px;font-weight:700;">充值金额:</span>
          <el-input
            class="mg30"
            v-model="savBox.rechargeamount"
            style="width:100px;text-align:center;padding:10px 10px;"
            disabled
          ></el-input>
          <br />
          <br>
          <br>
          <span style="font-size:16px;margin-left:25px;margin-top:20px;font-weight:700;">明细备注:</span>
          <el-input
            style="margin-left:115px; width:300px;margin-top:-20px;"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 10}"
            v-model="savBox.rechargedetail"
            disabled
          >
          </el-input>
        </div>
        <div class="warn-dialog-btn">
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'VipList',
  data () {
    return {
      company: {
        cardnum: '',
        telnum: '',
        username: ''
      },
      VipListData: [],
      VipList: {
        total: 18,
        pageNum: 1,
        pageSize: 10
      },
      dialogVisible: false,
      loading: false,
      checkFlag: false,
      // ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]
      additionalremark: '',
      additionalDialogVisible: false,
      savBox: []
    }
  },
  mounted () {
    this.getVipListData();
  },
  methods: {
    getVipListData () {
      this.loding = true;
      this.$axios.post('/app/v1/PositionBounty/selectGetPositionRechage', {
        username: this.company.username.length === 0 ? null : this.company.username,
        cardnum: this.company.cardnum.length === 0 ? null : this.company.cardnum,
        telnum: this.company.telnum.length === 0 ? null : this.company.telnum,
        pagenum: this.VipList.pageNum + ''
      }).then(res => {
        console.log(res)
        if (res.data.code === 1) {
          this.VipListData = res.data.data
          this.VipList.total = res.data.data.length
          this.loading = false;
        } else {
          this.VipListData = []
          this.$message({
            message: '获取充值记录列表失败！',
            type: "error"
          });
        }
      })
    },
    SearchInfo () {
      this.VipList.pageNum = 1;
      this.getVipListData();
    },
    //线下充值记录分页查询
    OnplayCurrentChange (val) {
      this.VipList.pageNum = val;
      this.getVipListData();
    },
    AddMoney (row) {
      console.log(row)
      this.savBox = row
      this.dialogVisible = true;
    },
    handleSizeChange (val) {
      this.VipList.pageSize = val;
      this.getVipListData();

    },
    closeWarnDialog () {
      this.reportContent = "";
    },
    additionalReport () {

    }
  }
}
</script>
<style scoped>
.onplay-box {
  margin: 10px 15px;
}

.search-nav-box {
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.item-search {
  height: 50px;
  line-height: 50px;
  display: flex;
}

.item-search:nth-child(1) {
  margin-left: 20px;
}

/* .item-search:nth-child(2){
    margin-left: 50px;
    margin-right: 50px;
} */
.item-search span {
  margin-right: 5px;
  white-space: nowrap;
  display: inline-block;
  font-size: 14px;
  color: #727272;
}

.item-data-serach {
  margin-top: 5px;
}

.item-botton {
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin: 5px 20px 5px 0px;
  color: #ffffff;
  cursor: pointer;
  background-color: #0064e4;
  text-align: center;
  border-radius: 4px;
}

.item-number {
  color: #0064e4;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
}

.table-box {
  margin: 15px 20px;
}

.item-name {
  color: #0064e4;
}

.item-cash {
  color: #e60012;
}

.el-pagination {
  padding-top: 30px;
  padding-bottom: 30px;
}

.item-name-companyname {
  cursor: pointer;
}
/* 上报原因样式 */
.warn-dialog-header {
  font-size: 16px;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #bfbfbf;
}

.warn-dialog-header::before {
  content: '';
  border-left: 8px solid #0064e4;
  margin-right: 10px;
}

.warn-dialog-body {
  box-sizing: border-box;
  padding: 20px;
}

.warn-dialog-body-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.warn-dialog-btn {
  margin-top: 165px;
  text-align: center;
  margin-left: 315px;
}
.el-radio-group {
  margin-top: 10px;
}
.el-dialog {
  width: 800px;
}
/* .el-radio{
    margin-top: 20px;
} */
.mg30 {
  margin-left: 5px;
}
.one_el-radio {
  margin-top: 0;
}
.tabShow {
  margin-top: 30px;
  height: 300px;
  padding-bottom: 20px;
}
</style>